<template>
    <div class="offerBox">
        <ul>
            <li v-for="dt in lists" :key="dt.bidUserId">
                <div class="artvar">
                    <Image v-if="dt.bidderHeadImage" :url="dt.bidderHeadImage"/>    
                </div>
                <div class="recordCon">
                    <div class="title">
                        <h4>{{dt.bidderName}}</h4>
                        <p>{{dt.paySuccessTime || '--'}}</p>
                    </div>
                    <div v-if="dt.bidAmount" class="price">￥{{dt.bidAmount.decimalTwoString}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import Image from '@/components/image.vue'
export default {
    props:{
        id:String
    },
    components:{
        myButton,
        Image
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            lists:[]
        })

        onMounted(()=>{
            store.dispatch('arApi/auction_record',{
                goodsId: props.id,
                limit: 1000,
                //orderField: "",
                //orderType: "",
                page: 1
            }).then(res=>{
                state.lists = res.data
            })
        })

        const close = ()=>{
            
        }

        return{
            ...toRefs(state),
            close
        }
    }
}
</script>

<style lang="scss" scoped>
    .offerBox{
        display: flex;
        flex-flow: column;
        ul{
            flex: 1;
            li{
                position: relative;
                z-index: 10;
                display: flex;
                height: 120px;
                &+li{
                    margin: 30px 0 0 0;
                }
                &::before{
                    content: '';
                    position: absolute;
                    left: 40px;
                    top: 82px;
                    width: 4px;
                    height: 84px;
                    background: url('/images/xt.png') left top no-repeat;
                    background-size:  100% 100%;
                }
                .artvar{
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .recordCon{
                    flex: 1;
                    display: flex;
                    text-align: left;
                    margin: 0 0 0 20px;
                    border-bottom:1px solid rgba(255, 255, 255, 0.2);
                    .title{
                        flex: 1;
                        h4{
                            height: 48px;
                            line-height: 48px;
                            font-size: 28px;
                            overflow: hidden;
                            font-weight: 500;
                        }
                        p{
                            font-size: 24px;
                            color: #86B0B0;
                            line-height: normal;
                            padding: 5px 0 0 0;
                        }
                    }
                    .price{
                        font-size: 28px;
                        font-weight: 500;
                        padding: 20px 0 0 0;
                        font-weight: bold;
                    }
                }
                &:last-child{
                   &::before{
                       display: none;
                   } 
                   .recordCon{
                       border: 0;
                   }
                }
            }
        }
    }
</style>